import React, {Component} from 'react';
import {
    Flex,
    Icon,
    Tabs,
    WingBlank,
    WhiteSpace,
    NavBar,
    Popover,
    Checkbox,
    Modal,
    List,
    Button,
    Drawer,
    Toast
} from 'antd-mobile';
import { connect } from 'dva';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import {routerRedux} from "dva/router";
import {checkbox} from './findPeople.less';
import findco from '../../assets/svg/findco.svg';




const Item = Popover.Item;
const CheckboxItem = Checkbox.CheckboxItem;
class FindPeople extends Component {
    constructor(props){
        super(props);
        this.state={
           data:this.props.match.params.data,
            isChecked: [],


        }
        this.isCheck=[]

        console.log(this.state.data)
    }


    onChange = (val) => {

        var { isChecked } = this.state;
        if (isChecked.includes(val)) this.setState({isChecked: isChecked.filter(e => e != val)});
        else this.setState({isChecked: [...isChecked, val]})


        if(this.isCheck.indexOf(val) != -1){
            var index = this.isCheck.indexOf(val);
            if (index != -1) {
                this.isCheck.splice(index, 1);
            }
        }else{
            this.isCheck.push(val);
        }
        console.log(this.isCheck)
        return this.isCheck
        // if(this.isCheck.length >=4){
        //     console.log(this.isCheck)
        //     Toast.info('最多选择四个!');
        //     return false
        // }

    }

    // change=()=>{
    //     this.setState({pageNo:(this.state.pageNo+1)})
    //     this.props.dispatch({ type: 'findOthers/getStylesEFF', obj:{ pageNo:this.state.pageNo }})
    // }
    concern=()=>{
        this.props.dispatch({ type: 'findOthers/getSelPeopleEFF', obj:{ memberId:this.isCheck.join(',')}}).then((r)=>{
            if (r.code == 200) {
                Toast.success(r.msg, 1.5, ()=>{
                    this.props.dispatch(routerRedux.replace({
                        pathname: `/findIndex/${1}`,
                    }))
                });
            } else {
                Toast.fail(r.msg, 1.5);
            }
        });
        console.log('1111')
    }



    componentDidMount(){
        this.props.dispatch({ type: 'findOthers/getPeopleEFF', obj:{ typeId:this.state.data}})

    }


    render() {
        const{peoples}=this.props.findOthers
        // const {styles}=this.props.findOthers
        // console.log(this.isCheck.length)
        return ( <Flex direction="column" style={{height:"100%",background:"#fff"}}>
                <p style={{textAlign:'center',fontSize:'.35rem',marginTop:".3rem"}}>值得关注的用户<span onClick={this.change}style={{fontSize:'.25rem',display:'block',marginTop:'.2rem'}}>关注后就可以看到他们发布的精彩内容</span></p>
                <Flex style={{width:'100%',flexWrap:'wrap',justifyContent:'space-around'}}>
                    {peoples!=undefined && peoples.map((v, i, a) => {
                        return (
                            <Flex key={i} style={{height:'1.5rem',width:'94%',borderBottom:'1px solid #e1e1e1'}}>
                                <NoLazyImg style={{width:'13%',height:'60%',borderRadius:'.45rem',marginLeft:'.3rem'}} src={ v.memberHead } />
                                <p style={{paddingLeft:'.2rem',width:'100%'}}>{v.memberName}<span style={{display:'block',fontSize:'.2rem',paddingTop:'.2rem'}}>{v.connet}</span></p>
                                <CheckboxItem key={i} className={checkbox} onChange={() => this.onChange(v.memberId)} disabled={this.state.checkboxNum > 3 && ![...this.state.isChecked].includes(v.id) ? true : false} />
                            </Flex>
                        )
                    })
                    }


                </Flex>
                <Button type="primary"style={{position:'absolute',bottom:'5%',width:'88%',borderRadius:'.45rem'}} onClick={this.concern}>下一步</Button>
            </Flex>

        )


    }
}

export default connect(({ findOthers }) => ({ findOthers}))(FindPeople);
